// 导入path模块
const path = require('path')
// 导入自动生成html文件 包
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 导出配置
module.exports = {
    entry: './src/index.js',//入口文件
    output: {//输出文件
        path: path.resolve(__dirname, 'dist'),//输出文件路径
        filename: 'main.js'//输出文件名
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html'
        })
    ],
    module: {
        rules: [
            {
                // 匹配以.css为后缀的文件 i 忽略大小写
                test: /\.css$/i,
                // 执行从右到左 先打包css文件 再把css插入DOM
                use: ["style-loader", "css-loader"],
            },
            {
                // 匹配以.css为后缀的文件 i 忽略大小写
                test: /\.less$/i,
                // 执行从右到左 先解析less文件为css文件 然后打包css文件 再把打包后的css插入DOM 
                use: ["style-loader", "css-loader", "less-loader"],
            },
            {
                // 匹配以什么为后缀名结尾的图片
                test: /\.(png|jpg|gif)$/i,
                use: [
                    {
                        loader: 'url-loader', // 匹配文件, 尝试转base64字符串打包到js中
                        // 配置limit, 超过8k, 不转, file-loader复制, 随机名, 输出文件
                        options: {
                            // 超过8k使用文件上传格式
                            limit: 8 * 1024,
                        },
                    },
                ],
            },
            {
                // 匹配以什么为后缀名结尾的图片
                test: /\.(eot|svg|ttf|woff|woff2)$/i,
                use: [
                    {
                        loader: 'url-loader', // 匹配文件, 尝试转base64字符串打包到js中
                        // 配置limit, 超过8k, 不转, file-loader复制, 随机名, 输出文件
                        options: {
                            // 超过2k使用文件上传格式
                            limit: 8 * 1024,
                        }
                    }
                ]
            }
        ]
    }
}